<template>
  <a-card :bordered="false">
    <div class="no-print" style="display: flex;justify-content: space-between;">
      <Header :title="'返回'" style="flex: 1;margin-right: 20px;" :hasBackPath="true" @headerBack="$router.back()"></Header>
      <a-button v-print="'#printContent'" ghost type="primary">打印</a-button>
    </div>
    <!--    打印内容-->
    <section ref="print" id="printContent">
      <div style="page-break-after:always">
        <div v-if="sendType == 2">
          <div v-for="(codes, i) in codesArr" style="display: flex;align-items: center;justify-content: center;height: 100vh;overflow: hidden;" :key="i">
            <div class="img-list">
              <img class="main-img" :style="{width: 100+'px', height: 100+'px'}" :src="qrCode" v-for="(item, index) in codes"  alt="" :key="index">
            </div>
          </div>
        </div>
        <div v-if="sendType == 3">
          <div v-for="(codes, i) in codesArr" style="height: 100vh;overflow: hidden;" :key="i">
            <div class="img-list">
              <div class="box" v-for="(item, index) in codes" :key="index">
                <div class="top">
                  <div class="cell" style="width: 60%;">
                    <!-- {{item.stores}} -->
                    <div style="width: 100%;writing-mode: tb-rl;">适用店铺：{{item.stores}}</div>
                  </div>
                  <!-- <div class="cell">
                    <div style="width: 100%;writing-mode: tb-rl;">适用城市：{{item.city}}</div>
                  </div> -->
                  <div class="cell" >
                    <div style="width: 100%;writing-mode: tb-rl;height:75vh;overflow: hidden;word-break: break-all;">适用品牌：{{item.pp}}</div>
                  </div>
                  <div class="cell" style="border-left: 1px solid #000;">
                    <div style="width: 100%;writing-mode: tb-rl;border-bottom: 1px solid #000;padding-bottom: 10px;">适用城市：{{item.city}}</div>
                    <div style="width: 100%;writing-mode: tb-rl;padding-top: 10px;">有效期至：{{item.validDate}}</div>
                  </div>
                </div>
                <div class="bottom" style="display: flex;">
                  <div style="flex: 1;display: flex;margin-top: 4px;justify-content: center;">
                    <Code :value="item.codes" :index="10*i+index" :width="62" :height="62"></Code>
                    <div class="amt">{{item.amt}}</div>
                  </div>
                  <div style="width: 20%;padding-top: 4px;border-left: 1px solid #000;">
                    <div style="width: 100%;writing-mode: tb-rl;font-size: 0.1rem;">{{item.codes | intercept}}</div>
                  </div>
                </div>
              </div>
            </div>
          </div>
        </div>
      </div>
    </section>
  </a-card>
</template>
<script>
  import Header from '@/views/box/components/layouts/Header'
  import Code from './components/Code'
  export default {
    components: {
      Code,
      Header
    },
    data() {
      return {
        sendType: '',
        codesArr: [],
        qrCode: ''
      }
    },
    created() {
      this.getPrintDetails()
    },
    computed: {},
    mounted() {
    },
    filters: {
      intercept(v) {
        const end = v.indexOf('-') != -1 ? v.indexOf('-') : v.length
        return v.slice(0, end)
      }
    },
    methods: {
      getPrintDetails() {
        const {codes, qrCode, sendType, qrNums} = JSON.parse(decodeURIComponent(this.$route.query.data))
        let arr = []
        if (sendType == 2) {
          for(let i = 0; i < qrNums; i++) {
            arr.push(1)
          }
        }
        if (sendType == 3) {
          arr = codes
        }
        this.sendType = sendType
        this.codesArr = this.arrTrans(1, arr)
        this.qrCode = qrCode
      },

      //一维数组拆分成二维
      arrTrans(num, arr) { // 一维数组转换为二维数组
        const newArr = []; // 声明数组
        arr.forEach((item, index) => {
          const page = Math.floor(index / num); // 计算该元素为第几个素组内
          if (!newArr[page]) { // 判断是否存在
            newArr[page] = [];
          }
          newArr[page].push(item);
        });
        return newArr;
      }
    }
  }
</script>
<style lang="less" scoped>
.cell{
  width: 20%;
  height: 75vh;
  font-size: 0.1rem;
}
.amt{
  position: absolute;
  left: 0;
  bottom: 0;
  width: 80%;
  text-align: center;
}
  .img-list{
    display: flex;
    flex-wrap: wrap;
    justify-content: flex-start;
  }
  .main-img{
    display: block;
    margin: 0 auto;
    width: 120px;
    height: 120px;
    box-sizing: border-box;
  }
  .code-num{
    line-height: 20px;
    text-align: center;
    font-size: 12px;
    color: #333;
  }
  .box{
    margin: 0 auto;
    width: 120px;
    height: 100vh;
    // border: 1px dashed #000;
    box-sizing: border-box;
  }
  .box .top{
    display: flex;
    height: 75vh;
    border-bottom: 1px solid #000;
    box-sizing: border-box;
  }
  .box .bottom{
    position: relative;
    height: 25vh;
    box-sizing: border-box;
  }
</style>
